<template>
  <!-- 直播课堂首页 -->
  <div class="streamingHome" id="streamingHome">
    <div class="mostreamingHome_banner">
      <img src="../../../static/zbsy/zbbj7mo.png" alt />
    </div>
    <div class="streamingHome_conta">
      <img class="streamingHome_conta_img" src="../../../static/zbsy/yddbj/1.png" alt />
      <div class="streamingHome_conta_body">
        <div class="streamingHome_conta_body_tit">科研学术论文写作研修班</div>
        <div class="streamingHome_conta_body_listB mostrming">
          <ul>
            <li>
              <div class="streamingHome_conta_body_list_top">
                <p>精品课程</p>
                <p>
                  <span>骨科</span>
                  <span>心血管</span>
                  <span>磁共振</span>
                  <span>大脑</span>
                </p>
              </div>
              <div class="streamingHome_conta_body_list_bottom">
                <ul style="height:222px">
                  <li>
                    <i></i>
                    <span>期刊审稿专家编委亲自授课</span>
                    <div style="clear:both;"></div>
                  </li>
                  <li>
                    <i></i>
                    <span>授人以渔亦授人以鱼</span>
                    <div style="clear:both;"></div>
                  </li>
                  <li>
                    <i></i>
                    <span>大课传授方法，1v1直击痛点</span>
                    <div style="clear:both;"></div>
                  </li>
                  <li>
                    <i></i>
                    <span>课后资深专家指导修改</span>
                    <div style="clear:both;"></div>
                  </li>
                  <li>
                    <i></i>
                    <span>精准拔高文章质量</span>
                    <div style="clear:both;"></div>
                  </li>
                  <li>
                    <i></i>
                    <span>打铁还需自身硬，从此发文不求人</span>
                    <div style="clear:both;"></div>
                  </li>
                </ul>
                <div
                  class="streamingHome_conta_body_list_bottom_detail"
                  @click="tostreHomelist('2')"
                >了解详情</div>
              </div>
            </li>
            <li>
              <div class="streamingHome_conta_body_list_top">
                <p>1V1课程</p>
                <p>
                  <span>专家</span>
                  <span>杂志</span>
                  <span>方法</span>
                </p>
              </div>
              <div class="streamingHome_conta_body_list_bottom">
                <ul style="height:222px">
                  <li>
                    <i></i>
                    <span>个性化指导文章内容 充分解析文章痛点</span>
                    <div style="clear:both;"></div>
                  </li>
                  <li>
                    <i></i>
                    <span>专业化把握科研动态 确保达到刊发标准</span>
                    <div style="clear:both;"></div>
                  </li>
                  <li>
                    <i></i>
                    <span>差异化适配辅导专家 完全贴合自身需求</span>
                    <div style="clear:both;"></div>
                  </li>
                  <li>
                    <i></i>
                    <span>灵活化调整授课时间 无需打乱生活节奏</span>
                    <div style="clear:both;"></div>
                  </li>
                </ul>
                <div
                  class="streamingHome_conta_body_list_bottom_detail"
                  @click="tostreHomelist('3')"
                >了解详情</div>
              </div>
            </li>
            <li>
              <div class="streamingHome_conta_body_list_top">
                <p>预备课程</p>
                <p>
                  <span>观察性研究设计</span>
                  <span>诊断性研究</span>
                </p>
              </div>
              <div class="streamingHome_conta_body_list_bottom">
                <ul style="height:238px">
                  <li>
                    <i></i>
                    <span>听课送会员 享受VIP六大权益</span>
                    <div style="clear:both;"></div>
                  </li>
                  <li>
                    <i></i>
                    <span>青铜变王者 发表文章从这里开始</span>
                    <div style="clear:both;"></div>
                  </li>
                  <li>
                    <i></i>
                    <span>期刊主任亲自授课掌握选刊技巧</span>
                    <div style="clear:both;"></div>
                  </li>
                  <li>
                    <i></i>
                    <span>专家直播授课身临其境气氛热烈</span>
                    <div style="clear:both;"></div>
                  </li>
                  <li>
                    <i></i>
                    <span>紧跟一对一专家指导 平台为您保驾护航</span>
                    <div style="clear:both;"></div>
                  </li>
                </ul>
                <div
                  class="streamingHome_conta_body_list_bottom_detail"
                  @click="tostreHomelist('4')"
                >了解详情</div>
              </div>
            </li>
            <li>
              <div class="streamingHome_conta_body_list_top">
                <p>速成班</p>
                <p>
                  <span>速成</span>
                  <span>12课时</span>
                  <span>期刊主任亲授</span>
                </p>
              </div>
              <div class="streamingHome_conta_body_list_bottom">
                <ul style="height:238px">
                  <li>
                    <i></i>
                    <span>听课送会员，享受VIP六大权益</span>
                    <div style="clear:both;"></div>
                  </li>
                  <li>
                    <i></i>
                    <span>参课获得国家级I类继续教育学分</span>
                    <div style="clear:both;"></div>
                  </li>
                  <li>
                    <i></i>
                    <span>审稿专家授课，直击写作痛点</span>
                    <div style="clear:both;"></div>
                  </li>
                  <li>
                    <i></i>
                    <span>期刊主任亲授，掌握投稿技巧</span>
                    <div style="clear:both;"></div>
                  </li>
                  <li>
                    <i></i>
                    <span>12课时浓缩，精准高效实用</span>
                    <div style="clear:both;"></div>
                  </li>
                  <li>
                    <i></i>
                    <span>后期跟踪服务，解决课程疑虑</span>
                    <div style="clear:both;"></div>
                  </li>
                </ul>
                <div
                  class="streamingHome_conta_body_list_bottom_detail"
                  @click="tostreHomelist('5')"
                >了解详情</div>
              </div>
            </li>
            <li>
              <div class="streamingHome_conta_body_list_top">
                <p>SCI课程</p>
                <p>
                  <span>SCI</span>
                  <span>文献检索</span>
                  <span>研究设计</span>
                </p>
              </div>
              <div class="streamingHome_conta_body_list_bottom">
                <ul style="height:258px">
                  <li>
                    <i></i>
                    <span>掌握结构化 SCI 论文认知，带你建立学术论文的架构</span>
                    <div style="clear:both"></div>
                  </li>
                  <li>
                    <i></i>
                    <span>认清 SCI 论文写作的难点，剖析并传授解决之道</span>
                    <div style="clear:both"></div>
                  </li>
                  <li>
                    <i></i>
                    <span>建立写作思维模式，让你了解国际审稿人的审稿思维</span>
                    <div style="clear:both"></div>
                  </li>
                  <li>
                    <i></i>
                    <span>获取大量改写技巧，开拓 SCI 论文成功新捷径</span>
                    <div style="clear:both"></div>
                  </li>
                  <li>
                    <i></i>
                    <span>与审稿专家面对面交流，快速掌握论文写作技巧</span>
                    <div style="clear:both"></div>
                  </li>
                </ul>
                <div
                  class="streamingHome_conta_body_list_bottom_detail"
                  @click="tostreHomelist('1')"
                >了解详情</div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="streamingHome_contb">
      <img class="streamingHome_contb_img" src="../../../static/zbsy/yddbj/2.png" alt />
      <div class="streamingHome_contb_body">
        <div class="streamingHome_contb_body_tit">课程精彩回放</div>
        <div class="streamingHome_contb_body_listB mostrming">
          <div class="streamingHome_contb_body_list_top">
            <div class="streamingHome_contb_body_list_top_image" @click="tomenuovolist()">
              <img src="../../../static/zb/ydy.png" alt />
              <div class="streamingHome_contb_body_list_top_image_cover_middle">
                <i class="iconfont icon-shipin"></i>
                <span>试看5分钟</span>
              </div>
            </div>
            <div class="streamingHome_contb_body_list_top_image" @click="scitomehuifa()">
              <img src="../../../static/zb/yxlwt.png" alt />
              <div class="streamingHome_contb_body_list_top_image_cover_middle">
                <i class="iconfont icon-shipin"></i>
                <span>试看5分钟</span>
              </div>
            </div>
            <div style="clear:both"></div>
          </div>
          <div class="streamingHome_contb_body_list_bottom">
            <ul>
              <li
                v-for="(item,index) in videolist"
                :key="index"
                @click="tomenuhuifahome(item,index)"
              >
                <span>
                  <i class="iconfont icon-zhibo"></i>
                  <span>{{item.Title}}</span>
                </span>
              </li>
              <div style="clear:both;"></div>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="streamingHome_contc">
      <img class="streamingHome_contc_img" src="../../../static/zbsy/yddbj/3.png" alt />
      <div class="streamingHome_contc_body">
        <div class="streamingHome_contc_body_tit">为什么选择在线一对一辅导</div>
        <div class="streamingHome_contc_body_list">
          <ul>
            <li>
              <div style="background:linear-gradient(0deg,rgba(234,22,38,1),rgba(253,105,113,1))">
                <i class="iconfont icon-mingshidui"></i>
              </div>
              <p>个性定制直击痛点</p>
              <p>1对1在线直播教学，根据文章着重讲解</p>
            </li>
            <li>
              <div style="background:linear-gradient(0deg,rgba(46,111,247,1),rgba(112,180,253,1));">
                <i
                  class="iconfont icon-shijian"
                  style="font-size: 27px!important;margin-left: 6px;line-height: 43px;"
                ></i>
              </div>
              <p>节省时间事半功倍</p>
              <p>减少文章修改次数，靶向拔高文章质量</p>
            </li>
            <li>
              <div style="background:linear-gradient(0deg,rgba(248,175,61,1),rgba(255,211,94,1));">
                <i
                  class="iconfont icon-huifang"
                  style="font-size: 31px!important;margin-left: 3px;line-height: 41px;"
                ></i>
              </div>
              <p>课程回播随时观看</p>
              <p>细致把握专家意见，追溯文章修改难点</p>
            </li>
            <li>
              <div style="background:linear-gradient(0deg,rgba(54,169,245,1),rgba(99,210,255,1));">
                <i
                  class="iconfont icon-xiezuo"
                  style="font-size: 33px!important;margin-left: 2px;line-height: 43px;"
                ></i>
              </div>
              <p>快速提高写作技巧</p>
              <p>差异化适配辅导专家，贴合作者因材施教</p>
            </li>
            <li>
              <div style="background:linear-gradient(0deg,rgba(244,74,108,1),rgba(252,144,176,1));">
                <i
                  class="iconfont icon-icon-test"
                  style="font-size: 28px!important;margin-left: 5px;line-height: 41px;"
                ></i>
              </div>
              <p>灵活掌握学习时间</p>
              <p>双向沟通授课时间，充分保障授课质量</p>
            </li>
            <li>
              <div style="background:linear-gradient(0deg,rgba(54,198,124,1),rgba(84,251,197,1));">
                <i
                  class="iconfont icon-shengao"
                  style="font-size: 28px!important;margin-left: 5px;line-height: 43px;"
                ></i>
              </div>
              <p>加快审稿见刊进度</p>
              <p>期刊联盟保驾护航，提高录用成功率</p>
            </li>
            <div style="clear:both;"></div>
          </ul>
          <div class="onteach" @click="tomenuovo()">立即预约1对1辅导课</div>
        </div>
      </div>
    </div>
    <div class="mowhite"></div>
  </div>
</template>

<script>
// import router from "@/router/index";
//juqery
import axios from "axios";
export default {
  name: "streamingHome",
  data() {
    return {
      videolist: []
    };
  },
  methods: {
    // 跳转回放图对应页面
    tomenuovolist() {
      this.$router.push({
        path: "/streaming/streamovoback",
        query: {
          OpenId: "DF54FDBF332DF6BD"
        }
      });
    },
    // 跳转到回放页面
    tomenuhuifahome(item, index) {
      this.$router.push({
        path: "/streaming/streamingdetail",
        query: {
          OpCourseId: item.OpenCourseId,
          Hftype: 2,
          type: 2,
          title: item.Title,
          OpenId: item.OpenId,
          index: index,
          coursetype: 0,
          contNav: 2
        }
      });
    },
    // 获取回放六条列表
    getvideolist() {
      axios
        .get("/api/LmCourseApi/GetHomePageLiveVideoList")
        .then(res => {
          this.videolist = res.data.data;
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 跳转对应回放列表-普通
    scitomehuifa() {
      this.$router.push({
        path: "/streaming/streamingdetail",
        query: {
          OpCourseId: "96B511D03E2CA8B1",
          Hftype: 2,
          type: 2,
          title: "干预性研究设计",
          OpenId: "BD43DCE055C22672",
          coursetype: 0,
          contNav: 2
        }
      });
    },
    // 跳转相对应列表
    tostreHomelist(type) {
      this.$router.push({
        path: "/streaming/streamingHome",
        query: {
          coursetype: type,
          contNav: 1
        }
      });
    },
    // 1v1 跳转
    tomenuovo() {
      this.$router.push({
        path: "/streaming/streamingHome",
        query: {
          coursetype: 3,
          contNav: 1
        }
      });
    }
  },
  created() {
    this.getvideolist();
  }
};
</script>

<style lang="less" scoped>
#streamingHome {
  .mostreamingHome_banner {
    width: 100%;
    margin-top: 49px;
    img {
      width: 100%;
    }
  }
  .streamingHome_conta {
    width: 100%;
    height: 520px;
    .streamingHome_conta_img {
      width: 100%;
      position: absolute;
    }
    .streamingHome_conta_body {
      width: 100%;
      margin: 0 auto;
      position: relative;
      .streamingHome_conta_body_tit {
        color: #000;
        font-size: 22px;
        text-align: center;
        padding: 5px;
        position: relative;
        top: 17px;
        font-weight: bold;
        font-family: Adobe Heiti Std;
      }
      .streamingHome_conta_body_listB {
        width: 94%;
        margin-top: 41px !important;
        overflow: hidden;
        overflow-x: auto;
        margin: 0 auto;
        ul {
          width: 388%;
          height: 449px;
          li {
            list-style: none;
            float: left;
            width: 19%;
            height: 426px;
            background: #fff;
            margin-right: 11px;
            padding: 15px 6px;
            .streamingHome_conta_body_list_top {
              border-bottom: 1px solid #f2f2f2;
              p:nth-child(1) {
                color: #000000;
                font-size: 18px;
                font-family: Adobe Heiti Std;
                font-weight: bold;
                margin-left: 3px;
              }
              p:nth-child(2) {
                margin-top: 16px;
                margin-bottom: 17px;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-line-clamp: 1;
                line-clamp: 1;
                white-space: nowrap;
                span {
                  padding: 1px 7px;
                  display: inline-block;
                  background: #f8f8f8;
                  color: #939393;
                  font-size: 14px;
                  border-radius: 10px;
                }
              }
            }
            .streamingHome_conta_body_list_bottom {
              width: 100%;
              height: 100%;
              ul {
                width: 100%;
                padding: 5px;
                height: 303px;
                li {
                  float: none;
                  height: auto;
                  padding: 3px 0;
                  width: 100%;
                  // 恢复li的点
                  // list-style: disc;
                  i {
                    float: left;
                    width: 4px;
                    height: 4px;
                    border-radius: 50%;
                    background: #000;
                    margin-right: 5px;
                    position: relative;
                    top: 6px;
                  }
                  span {
                    width: 92%;
                    float: right;
                    font-size: 15px;
                    color: #000;
                    letter-spacing: 1px;
                  }
                }
              }
              .streamingHome_conta_body_list_bottom_detail {
                width: 80%;
                height: 35px;
                border: 1px solid #003c80;
                color: #003c80;
                font-size: 16px;
                font-weight: bold;
                line-height: 35px;
                text-align: center;
                cursor: pointer;
                border-radius: 18px;
                letter-spacing: 2px;
                margin: 0 auto;
              }
              .streamingHome_conta_body_list_bottom_detail:hover {
                background: #003c80;
                color: #fff;
              }
            }
          }
          li:last-child {
            margin-right: 0;
          }
        }
      }
    }
  }
  .streamingHome_contb {
    width: 100%;
    height: auto !important;
    .streamingHome_contb_img {
      width: 100%;
      position: absolute;
    }
    .streamingHome_contb_body {
      width: 100%;
      height: auto;
      margin: 0 auto;
      position: relative;
      .streamingHome_contb_body_tit {
        color: #000;
        font-size: 22px;
        padding: 5px;
        text-align: center;
        position: relative;
        top: 27px;
        font-weight: bold;
        letter-spacing: 0px;
        font-family: Adobe Heiti Std;
      }
      .streamingHome_contb_body_listB {
        width: 94% !important;
        margin: 0 auto;
        margin-top: 45px !important;
        .streamingHome_contb_body_list_top {
          width: 100%;
          .streamingHome_contb_body_list_top_image {
            width: 50% !important;
            float: left;
            padding: 6px;
            position: relative;
            img {
              width: 100%;
              height: 100%;
            }
            .streamingHome_contb_body_list_top_image_cover_middle {
              width: 100px;
              height: 34px;
              background: rgba(0, 0, 0, 0.8);
              position: absolute;
              top: 51%;
              left: 22%;
              line-height: 48px;
              text-align: center;
              cursor: pointer;
              i {
                color: #fff;
                font-size: 18px;
                position: relative;
                left: -3px;
                top: -6px;
              }
              span {
                font-weight: bold;
                font-size: 14px;
                color: #fff;
                position: relative;
                top: -3px;
                top: -8px;
              }
            }
          }
        }
        .streamingHome_contb_body_list_bottom {
          width: 100%;
          margin-top: 15px;
          ul {
            width: 100%;
            li:hover {
              span:nth-child(1) {
                i {
                  color: #003c80;
                }
                span {
                  color: #003c80;
                }
              }
            }
            li {
              list-style: none;
              width: 100%;
              height: 28px;
              background: #f8f8ff;
              padding: 0px 14px;
              line-height: 28px;
              float: left;
              cursor: pointer;
              margin-bottom: 29px;
              margin-right: 48px;
              span:nth-child(1) {
                float: left;
                span {
                  color: #000000;
                  font-size: 14px;
                  // font-weight: bold;
                }
                i {
                  color: #7c7c7c;
                  margin-right: 9px;
                  font-size: 22px;
                  font-weight: normal;
                }
              }
              span:nth-child(2) {
                float: right;
                color: #747474;
                font-size: 14px;
              }
            }
            li:nth-child(2),
            li:nth-child(4),
            li:nth-child(6) {
              margin-right: 0;
            }
          }
        }
      }
    }
  }
  .streamingHome_contc {
    width: 100%;
    height: 1160px;
    margin-top: 20px;
    .streamingHome_contc_img {
      width: 100%;
      position: absolute;
    }
    .streamingHome_contc_body {
      width: 100%;
      margin: 0 auto;
      height: auto;
      position: relative;
      .streamingHome_contc_body_tit {
        color: #000;
        font-size: 22px;
        padding: 5px;
        text-align: center;
        position: relative;
        top: 26px;
        font-weight: bold;
        letter-spacing: 0px;
        font-family: Adobe Heiti Std;
      }
      .streamingHome_contc_body_list {
        width: 94%;
        height: auto;
        margin: 0 auto;
        margin-top: 58px;
        ul {
          width: 100%;
          height: auto;
          li {
            list-style: none;
            width: 100%;
            border-radius: 10px;
            background: #fff;
            float: left;
            margin-right: 30px;
            margin-bottom: 15px;
            padding: 6px 13px;
            div {
              width: 38px;
              height: 38px;
              border-radius: 50%;
              i {
                color: #fff;
                font-size: 20px !important;
                text-align: center;
                line-height: 43px;
                margin-left: 10px;
              }
            }
            p:nth-child(2) {
              color: #000;
              font-size: 18px;
              margin-top: 20px;
              font-weight: bold;
            }
            p:nth-child(3) {
              margin-top: 8px;
              color: #717171;
              font-size: 16px;
              letter-spacing: 1px;
            }
            p:nth-child(4) {
              font-size: 16px;
              color: #717171;
              letter-spacing: 1px;
              margin-top: 3px;
            }
          }
          li:nth-child(3),
          li:nth-child(6) {
            margin-right: 0;
          }
        }
        .onteach {
          width: 80%;
          height: 38px;
          background: linear-gradient(
            0deg,
            rgba(235, 27, 42, 1),
            rgba(255, 108, 116, 1)
          );
          box-shadow: 0px 1px 15px 0px rgba(139, 0, 11, 0.46);
          border-radius: 29px;
          font-size: 22px;
          font-family: Adobe Heiti Std;
          font-weight: bold;
          color: #fff;
          margin: 0 auto;
          text-align: center;
          line-height: 38px;
          cursor: pointer;
          margin-top: 26px;
        }
      }
    }
  }
  .mowhite {
    width: 100%;
    height: 50px;
    background: #fff;
  }
}
</style>